<template>
  <div>
    <!-- 选择组员 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="70%"
      top="30px"
      :before-close="handleClose"
      :show-close="false"
    >
      <div class="head">
        <span>选择项目成员</span>
      </div>
      <div class="selected">
        <span>已选项目成员</span>
        <div class="showRole">
          <ul v-if="showList.length > 0">
            <li v-for="item in showList" :key="item.id">
              <i class="el-icon-close closeBox" @click="delXmcy(item)"></i>
              <template v-for="ele in item.evaluationroleList">
                <p v-if="ele.checked === true" :key="ele.id">{{ ele.name }}</p>
              </template>
              <img :src="item.avatar" alt="" />
              <p>{{ item.name }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="roleList">
        <span class="title">人员列表</span>
        <div class="search">
          <input
            type="text"
            name=""
            id=""
            placeholder="搜索成员"
            v-model="searchInfo"
            @keyup.enter="searchMember"
          />
          <!-- @keyup="searchMember" -->
          <i class="el-icon-search icon" @click="searchMember"></i>
        </div>
        <div class="list">
          <ul v-if="roleData.length > 0">
            <li v-for="item in roleData" :key="item.id" @click="clickInput">
              <img :src="item.avatar" alt="" />
              <span class="name">{{ item.name }}</span>
              <div>
                <span
                  v-for="ele in item.evaluationroleList"
                  :key="ele.id"
                  :class="ele.checked ? 'active' : ''"
                  style="cursor: pointer"
                  @click="choiceRole(ele, item, $event)"
                  >{{ ele.name }}</span
                >
              </div>
              <!-- {{item.isSelect}} -->
              <input
                type="checkbox"
                name=""
                id=""
                v-model="item.isSelect"
                @click="sureRole($event, item)"
                :checked="item.isSelect"
              />
            </li>
          </ul>
          <div v-else>
            <span>暂无数据</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <!-- <el-popconfirm
  title="确认修改项目组员？"
  @confirm="sure"
>
  <el-button slot="reference" type="primary">确 定</el-button>
</el-popconfirm> -->
        <el-button type="primary" v-preventReClick @click="sure"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRoles, updateRoles } from '../../../api/lessonPreparation/myLesson';
export default {
  props: ['evaluationId'],
  data() {
    return {
      dialogVisible: false,
      roleData: [],
      showList: [],
      receiveInfo: [], // 储存传过来的数据,
      departmentId: null,
      searchInfo: '',
      projectId: '',
      updateProjectDto: []
    };
  },
  methods: {
    // 控制模态框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.roleData = [];
          this.searchInfo = '';
          this.showList = [];
        })
        .catch(_ => { });
    },
    // 打开模态框
    openSelectMember(val, id, departmentId) {
      this.roleData = [];
      this.searchInfo = '';
      this.showList = [];
      // this.$forceUpdate();
      // console.log('传过来的数据', val, id, departmentId);
      this.receiveInfo = val;
      this.projectId = id;
      // 打开模态框
      this.dialogVisible = true;
      // 判断传过来的班级id是否为全部
      if (departmentId !== 0) {
        this.departmentId = departmentId;
      } else {
        this.departmentId = null;
      }
      this.getRoleList();
    },
    // 取消选项目经理，将之前选择的清空
    cancel() {
      this.showList = [];
      this.roleData = [];
      this.dialogVisible = false;
    },
    // 确认选取的人员提交修改
    async sure() {
      let dto = [];
      // console.log(this.showList);
      this.showList.forEach(item => {
        // console.log(item);
        if (item.evaluationroleList !== null) {
          // console.log(item);
          dto.push({
            projectuser: { userid: item.id }, List: [...item.evaluationroleList], projectuserroleList: []
          });
        } else {
          // console.log(item);
          dto.push({
            projectuser: { userid: item.id }, List: [], projectuserroleList: []
          });
        }
      });
      // console.log(dto);
      dto.forEach((item, index) => {
        item.List.forEach(ele => {
          if (ele.checked === true) {
            // console.log(ele.name);
            // item.projectuserroleList = [];
            item.projectuserroleList.push({
              'evaluationroleid': ele.id,
              'rolename': ele.name
            });
          }
        });
      });
      // console.log(dto);
      dto.forEach(item => {
        delete item.List;
      });
      // console.log(dto);
      const res = await updateRoles(this.projectId, 1, JSON.stringify(dto));
      // console.log(res);
      if (res.code === 200) {
        this.$message({
          showClose: true,
          type: 'success',
          message: '修改成功!'
        });
      } else {
        // this.$message.error(`修改失败,${res.msg}`);
        this.$message({
          showClose: true,
          message: `修改失败,${res.msg}`,
          type: 'error'
        });
      }
      setTimeout(() => {
        this.$emit('gettableData', 0);
        this.searchInfo = '';
        this.dialogVisible = false;
      }, 500);
      this.showList = [];
      this.dialogVisible = false;
    },
    // 获取人员列表
    async getRoleList() {
      const res = await getRoles({ id: sessionStorage.getItem('userid'), evaluationId: this.evaluationId, departmentId: this.departmentId });
      // console.log(res);
      this.roleData = res.data;
      // 给每条数据默认一个状态
      this.roleData.forEach(item => {
        item.isSelect = false;
      });
      // 根据传过来的数据设置默认选中
      // console.log(this.receiveInfo);
      // 人员列表的默认选中
      this.roleData.forEach(item => {
        this.receiveInfo.forEach(item2 => {
          if (item.id === item2.id) {
            // console.log(item2);
            item.isSelect = true;
            if (item.evaluationroleList !== null) {
              item.evaluationroleList.forEach(ele => {
                item2.roleName.forEach(ele2 => {
                  if (ele.id === ele2.evaluationroleid) {
                  // console.log(ele);
                    ele.checked = true;
                  }
                });
              });
            }
          }
        });
      });
      // 已选人员的默认选中
      this.roleData.forEach(item => {
        if (item.isSelect === true) {
          this.showList.push(item);
        }
      });
    },
    // 任务成员删除事件
    async delXmcy(i) {
      // console.log(i);
      i.isSelect = false;
      i.checked = false;
      let index = this.showList.findIndex(item => item.id === i.id);
      // console.log(index);
      this.showList.splice(index, 1);
      this.$forceUpdate();
      // this.getRoleList();
      // console.log(this.roleData);
      // 人员列表的默认选中
      this.roleData.forEach(item => {
        if (item.id === i.id) {
          item.isSelect = false;
          if (item.evaluationroleList !== null) {
            item.evaluationroleList.forEach(ele => {
              ele.checked = false;
            });
          }
        }
      });
    },
    // 选择角色
    choiceRole(val, fatherVal, e) {
      e.stopPropagation();
      val.checked = !val.checked;
      // 修改角色之后，上面的showlist的角色也应该跟着变化
      if (this.showList.length > 0) {
        this.showList.forEach((item, index) => {
          if (item.id === fatherVal.id) {
            // console.log(fatherVal);
            // console.log(this.showList);
            this.showList[index] = fatherVal;
          }
        });
      }
    },
    // 点击盒子选中里面单选框
    clickInput(e) {
      e.currentTarget.lastElementChild.click();
    },
    // 选成员
    sureRole(e, val) {
      e.stopPropagation();
      if (e.target.checked === true) {
        this.showList.push(val);
      } else {
        const newList = this.showList.filter(item => {
          return item.id !== val.id;
        });
        this.showList = newList;
        // console.log(this.showList);
      }
    },
    // 搜索成员
    async searchMember() {
      // console.log(this.searchInfo);
      const res = await getRoles({ id: sessionStorage.getItem('userid'), evaluationId: this.evaluationId, departmentId: this.departmentId, name: this.searchInfo });
      // console.log(res);
      this.roleData = res.data;
      // 给每条数据默认一个状态
      this.roleData.forEach(item => {
        item.isSelect = false;
      });
      // 搜索完成后默认选中
      // 先更改下面人员列表的选中
      this.showList.forEach(item => {
        this.roleData.forEach(item1 => {
          if (item.id === item1.id && item.isSelect === true) {
            // console.log(item);
            // console.log(item1);
            // 设置人员为默认选中
            item1.isSelect = true;
            item1.evaluationroleList.forEach(ele => {
              item.evaluationroleList.forEach(ele1 => {
                if (ele.id === ele1.id && ele1.checked === true) {
                  ele.checked = true;
                }
              });
            });
          }
        });
      });
    }
  }
};
</script>

<style scoped lang="less">
/deep/.el-dialog__header,
/deep/.el-dialog__body {
  padding: 0;
}
/deep/.el-dialog {
  // width: 810px;
  box-shadow: 3px 3px 11px 0px #3d3d3d;
}
.head {
  width: 100%;
  height: 55px;
  background: #f1f5ff;
  text-align: center;
  line-height: 55px;
  span {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
}
.selected {
  padding: 15px 10px;
  span {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    display: inline-block;
    margin-left: 10px;
  }
  .showRole {
    margin-top: 5px;
    min-height: 80px;
    overflow-y: scroll;
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      li {
        position: relative;
        min-width: 60px;
        text-align: center;
        margin-right: 20px;
        .closeBox {
          position: absolute;
          top: 0;
          right: -15px;
          cursor: pointer;
        }
        p {
          margin: 0;
          padding: 0;
          font-size: 12px;
        }
        img {
          height: 45px;
          width: 45px;
        }
      }
    }
  }
}
.roleList {
  padding: 0 20px;
  .title {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
  .search {
    margin-top: 10px;
    text-align: center;
    position: relative;
    input {
      width: 100%;
      height: 40px;
      background: #ffffff;
      border-radius: 24px;
      border: 1px solid #eeeeee;
      outline: none;
      text-align: center;
    }
    .el-icon-search {
      position: absolute;
      width: 33px;
      height: 33px;
      line-height: 33px;
      background: #2fc0e0;
      border-radius: 20px;
      color: white;
      right: 5px;
      top: 5px;
    }
  }
  .list {
    margin-top: 10px;
    height: 420px;
    overflow-y: scroll;
    ul {
      list-style: none;
      li {
        display: flex;
        height: 60px;
        border-bottom: 1px solid #eeeeee;
        position: relative;
        align-items: center;
        img {
          height: 45px;
          width: 45px;
        }
        .name {
          display: inline-block;
          width: 100px;
          line-height: 50px;
          margin-left: 5px;
        }
        div {
          text-align: center;
          height: 100%;
          line-height: 60px;
          .active {
            background-color: #ffd167;
            color: white;
          }
          span {
            display: inline-block;
            width: 91px;
            height: 32px;
            background: #f7f7f7;
            border-radius: 8px;
            line-height: 32px;
            margin: 0 15px;
          }
        }
        input {
          position: absolute;
          top: 15px;
          right: 20px;
          width: 25px;
          height: 25px;
          border-radius: 2px;
          border: 2px solid;
          border-image: linear-gradient(
              180deg,
              rgba(237, 237, 237, 1),
              rgba(214, 214, 214, 1)
            )
            2 2;
        }
      }
      li:hover {
        background: rgb(219, 219, 219);
      }
    }
  }
}
/deep/.el-dialog__footer {
  text-align: center;
}
</style>
